<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>allinone playlist演示(elegant皮肤/响应式)_素材火</title>

<link rel="stylesheet" href="css/allinone_bannerWithPlaylist.css">
<script src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
<script src="js/jquery-ui-1.10.2.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script src="js/allinone_bannerWithPlaylist.js"></script>

<script>
$(function() {
	$('#allinone_bannerWithPlaylist_elegant').allinone_bannerWithPlaylist({
		skin: 'elegant',
		width: 1920,
		height: 595,
		width100Proc:true,
		playlistWidth: 400,
		responsive:true,
		origThumbImgW:90,
		origThumbImgH:90,
		defaultEffect: 'random'
	});
});
</script>
</head>

<body>
<h1>allinone playlist演示演示(elegant皮肤/全屏)</h1>

<!-- 代码开始 -->
<div id="allinone_bannerWithPlaylist_elegant" style="display:none;">
	<!-- 图片 -->
	<ul class="allinone_bannerWithPlaylist_list">
		<li data-bottom-thumb="images/elegantFullWidth/thumbs/01_elegantPlaylist.jpg" data-text-id="#allinone_bannerWithPlaylist_photoText1" data-title="Lorem Ipsum Dolor1" data-desc="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit"><img src="images/elegantFullWidth/01_elegantPlaylist.jpg" alt="" /></li>
		<li data-bottom-thumb="images/elegantFullWidth/thumbs/02_elegantPlaylist.jpg" data-text-id="#allinone_bannerWithPlaylist_photoText2" data-title="Fusce Suscipit Risus2" data-desc="Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus."><img src="images/elegantFullWidth/02_elegantPlaylist.jpg" alt="" /></li>
		<li data-bottom-thumb="images/elegantFullWidth/thumbs/03_elegantPlaylist.jpg" data-text-id="#allinone_bannerWithPlaylist_photoText3" data-title="Class Aptent Taciti" data-desc="Maecenas interdum interdum enim id laoreet. Curabitur semper fermentum leo pretium eleifend."><img src="images/elegantFullWidth/03_elegantPlaylist.jpg" alt="" />
		<li data-bottom-thumb="images/elegantFullWidth/thumbs/04_elegantPlaylist.jpg" data-text-id="#allinone_bannerWithPlaylist_photoText4" data-title="Maecenas Lacus Ante" data-desc="Donec hendrerit magna sit amet eros lobortis non egestas diam scelerisque. Praesent molestie."><img src="images/elegantFullWidth/04_elegantPlaylist.jpg" alt="" />
		<li data-bottom-thumb="images/elegantFullWidth/thumbs/05_elegantPlaylist.jpg" data-text-id="#allinone_bannerWithPlaylist_photoText5" data-title="Lorem Ipsum Dolor" data-desc="Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque hendrerit"><img src="images/elegantFullWidth/05_elegantPlaylist.jpg" alt="" />
		<li data-bottom-thumb="images/elegantFullWidth/thumbs/06_elegantPlaylist.jpg" data-text-id="#allinone_bannerWithPlaylist_photoText6" data-title="Suscipit Risus" data-desc="Phasellus vitae velit eu turpis consequat hendrerit. Curabitur vitae sapien libero, amet ornare lectus." data-link="http://www.sucaihuo.com/js/249.html" data-target="_blank"><img src="images/elegantFullWidth/06_elegantPlaylist.jpg" alt="" />
	</ul>

	<!-- 文字 -->
	<div id="allinone_bannerWithPlaylist_photoText1" class="allinone_bannerWithPlaylist_texts">
		<div class="allinone_bannerWithPlaylist_text_line textElement11_elegantFullWidth" data-initial-left="0" data-initial-top="100" data-final-left="0" data-final-top="480" data-duration="0.5" data-fade-start="0" data-delay="0"><span style="text-transform:uppercase; font-weight:bold; padding-left:5px;">Up to 5 types of sliders</span><br />
			<span style="padding-left:5px;">Each with multiple SKINS</span></div>
	</div>
	<div id="allinone_bannerWithPlaylist_photoText2" class="allinone_bannerWithPlaylist_texts">
		<div class="allinone_bannerWithPlaylist_text_line textElement21_elegantFullWidth" data-initial-left="80" data-initial-top="30" data-final-left="30" data-final-top="30" data-duration="0.5" data-fade-start="0" data-delay="0">16 transition effects for images</div>
		<div class="allinone_bannerWithPlaylist_text_line textElement22_elegantFullWidth" data-initial-left="280" data-initial-top="100" data-final-left="30" data-final-top="100" data-duration="0.5" data-fade-start="0" data-delay="0.3">optional can set the transition for each image</div>
	</div>
	<div id="allinone_bannerWithPlaylist_photoText3" class="allinone_bannerWithPlaylist_texts">
		<div class="allinone_bannerWithPlaylist_text_line textElement31_elegantFullWidth" data-initial-left="0" data-initial-top="50" data-final-left="40" data-final-top="35" data-duration="0.5" data-fade-start="0" data-delay="0">Animated text from any direction</div>
		<div class="allinone_bannerWithPlaylist_text_line textElement32_elegantFullWidth" data-initial-left="0" data-initial-top="90" data-final-left="40" data-final-top="90" data-duration="0.5" data-fade-start="0" data-delay="0.3">top, bottom, left and right</div>
		<div class="allinone_bannerWithPlaylist_text_line textElement33_elegantFullWidth" data-initial-left="0" data-initial-top="200" data-final-left="40" data-final-top="150" data-duration="1" data-fade-start="0" data-delay="0.5">Any color, CSS and HTML formated</div>
	</div>
	<div id="allinone_bannerWithPlaylist_photoText4" class="allinone_bannerWithPlaylist_texts">
		<div class="allinone_bannerWithPlaylist_text_line textElement41_elegantFullWidth" data-initial-left="0" data-initial-top="100" data-final-left="0" data-final-top="464" data-duration="0.5" data-fade-start="0" data-delay="0"><span style="padding-left:5px;">Lorem <a href="http://www.sucaihuo.com/js/249.html" target="_blank">Ipsum</a> Dolor Sit Amet</span><br />
			<span style="padding-left:5px;">Consectetur Adiscipit</span></div>
	</div>
	<div id="allinone_bannerWithPlaylist_photoText5" class="allinone_bannerWithPlaylist_texts">
		<div class="allinone_bannerWithPlaylist_text_line textElement51_elegantFullWidth" data-initial-left="30" data-initial-top="0" data-final-left="30" data-final-top="410" data-duration="0.5" data-fade-start="0" data-delay="0">Line One is here</div>
		<div class="allinone_bannerWithPlaylist_text_line textElement52_elegantFullWidth" data-initial-left="30" data-initial-top="384" data-final-left="30" data-final-top="365" data-duration="0.5" data-fade-start="0" data-delay="0.3">Line Two over there</div>
	</div>
</div>
<!-- 代码结束 -->

               
               






<!-- 以下是统计和广告，与演示无关，不必理会 -->
<style type="text/css">
body { margin: 0;}
h1 { margin: 40px 10px; font: 32px Microsoft Yahei; text-align: center;}

.vad { margin:50px 0 5px; font-family: arial,宋体,sans-serif; text-align:center;}
.vad a { display:inline-block; height: 30px; line-height: 30px; margin:0 5px; padding:0 20px; font-size:14px; text-align:center; color:#eee; text-decoration:none; background-color:#222;}
.vad a:hover { color:#fff; background-color:#000;}

.a728x90 { width: 728px; height: 90px; margin: 0 auto;}
</style>

<p class="vad"><a href="http://www.sucaihuo.com/" target="_blank">sucaihuo.com</a> <a href="http://www.sucaihuo.com/js/249.html" target="_blank">说 明</a> <a href="http://www.sucaihuo.com/js/249.html" target="_blank">下 载</a></p>

</body>
</html>